<template>
  <div>
    <Top></Top>
    <Header></Header>
    <el-row>
      <!-- span:占多少栏   offset：向右便宜多少栏 -->
      <el-col :span="4" :offset="16">
        <el-input placeholder="账号" v-model="user.account"></el-input>
        <el-input placeholder="密码" v-model="user.password"></el-input>
        <el-button type="success" @click="login">登录</el-button>
      </el-col>
    </el-row>  
    <Footer></Footer>
  </div>
</template>

<script>
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Footer from './commons/footer.vue'
export default{
  data(){
    return{
      user:{
        account:"",
        password:""
      }
    }
  },
  components: {
    // 2.注册
    Top,
    Header,
    Footer,
  },
  methods:{
    login(){
      this.$axios.post("/user/login",this.user).then(res => {
        console.log(res)

        if(res.data.code == 200){
          // 用户信息放localStorage
          window.localStorage.setItem("user",JSON.stringify(res.data.data))
          // 如果是商家跳转到后台管理页面
          for (const role of res.data.data.roleList) {
            if(role.name == 'merchants'){
              // 跳转到卖家后台管理页面，push不会终止当前代码继续向下执行
              this.$router.push("/merchants")
              //
              return
            }
          }
          this.$router.push("/")
        }else{
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>